<!-- 交互分析 -->
 <template>
  <div class="interaction-analysis">
    <el-container>
      <!-- <el-header>肇远数字虚拟人后台记录管理系统 - 虚拟人交互分析</el-header> -->
      <el-main>
        <!-- 图表展示区域 -->
        <div class="chart-container">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>交互次数统计</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >查看更多</el-button
              >
            </div>
            <div v-if="chartDataLoaded">
              <!-- 这里放置ECharts图表组件 -->
              <div ref="myChart" style="width: 100%; height: 400px"></div>
            </div>
          </el-card>
        </div>

        <!-- 数据列表展示区域 -->
        <div class="data-list-container">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>交互数据列表</span>
            </div>
            <el-table
              :data="analysis"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column
                prop="date"
                label="日期"
                width="280"
              ></el-table-column>
              <el-table-column
                prop="label"
                label="响应时间 (秒)"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="interactions"
                label="交互次数"
                width="220"
              ></el-table-column>
              <el-table-column
                prop="satisfaction"
                label="满意度"
                width="220"
              ></el-table-column>
              <!-- 其他数据列 -->
            </el-table>
            <el-pageArguments
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageArguments.currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageArguments.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageArguments.total"
            ></el-pageArguments>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template> 

<script type="text/ecmascript-6">
// import {analysisData,recordsISave,recordsIDelete } from '../../api/basisMG'
import Chart from "echarts";
export default {
  name: "InteractionAnalysis",
  data() {
    return {
      filters: {
        dateRange: "",
      },
      analysis: [], // 表格数据
      chartData: null, // 图表数据
      chartDataLoaded: true,
      pageArguments: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      multipleSelection: [], // 表格多选数据
    };
  },
  created() {
    this.getdata();
  },
  mounted() {
    // 初始化图表
    this.AnalysisChart();
  },
  methods: {
    // 获取数据列表
    getdata(recordContent) {
      this.loading = true;
      // 模拟数据开始
      let res = {
        columns: [
          { name: "日期", label: "日期" },
          { name: "交互次数", label: "交互次数" },
          { name: "平均响应时间", label: "平均响应时间 (秒)" },
          { name: "满意度", label: "满意度 (%)" },
        ],
        data: [
        {date: "2023-04-10", interactions: 60, label: 5.0, satisfaction: 85 },
          {date: "2023-04-11", interactions: 63, label: 5.2, satisfaction: 90 },
          { date: "2023-04-12", interactions:78, label: 4.8, satisfaction: 88 },
          { date: "2023-04-13", interactions:81, label: 5.5, satisfaction: 92 },
          { date: "2023-04-14", interactions:59, label: 5.0, satisfaction: 87 },
          { date: "2023-04-15", interactions: 47, label: 4.9, satisfaction: 89 },
          { date: "2023-04-16", interactions: 42,label: 4.9, satisfaction:95 },
        ],
      };
      this.loading = false;
      this.analysis = res.data;

      /***
       *  正式环境环境 调用接口
       */
       this.getAnalysisData(); 
    },
    // 初始化图表
    AnalysisChart() {
      this.chartDataLoaded = true;
      const chartDom = this.$refs.myChart;
      const myChart = Chart.init(chartDom);
      // 设置图表配置项和数据
      const option = {
        // 标题
        title: {
          text: "肇远数字虚拟人交互分析",
          subtext: "交互次数与满意度",
          left: "center",
        },
        // 提示框组件
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 网格
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: "category",
          data: [
            "2024-04-10",
            "2024-04-11",
            "2024-04-12",
            "2024-04-13",
            "2024-04-14",
            "2024-04-15",
            "2024-04-16",
          ], // 类别数据，
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        // y轴
        yAxis: {
          type: "value",
        },
        // 系列列表
        series: [
          {
            name: "交互次数",
            type: "bar", // 柱状图
            data: [60, 63, 78, 81, 59,47, 42,], // 
             itemStyle: {
            normal: {
              color: "#FFB6C1",
              lineStyle: {
                color: "#FFB6C1",
              }
            }
          }
          },
          {
            name: "满意度",
            type: "line", // 折线图
            data: [85, 90, 88, 92, 87,89, 95,], // 满意度数据，
            itemStyle: {
            normal: {
              color: "#3299CC",
              lineStyle: {
                color: "#3299CC",
              }
            }
          }
          },
        ],
      };
      myChart.setOption(option);
    },
    // 获取数据
    getAnalysisData() {
      // 发送请求获取数据
      this.fetchInteractionData(this.filters.dateRange)
        .then((response) => {
          this.analysisData = response.analysisData;
          this.chartData = response.chartData;
          this.pageArguments.total = response.total;
          this.AnalysisChart(); // 如果有新的图表数据，重新初始化图表
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    // 处理表格多选数据变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 处理分页大小变化
    handleSizeChange(val) {
      this.pageArguments.pageSize = val;
      this.getAnalysisData(); // 重新获取数据
    },
    // 处理分页当前页变化
    handleCurrentChange(val) {
      this.pageArguments.currentPage = val;
      this.getAnalysisData(); // 重新获取数据
    },

  },
};
</script>

<style scoped>
.el-header{
  height: 10px !important;
}
</style>

 
 